<template>
  <div class="list-table">
    <van-row>
      <van-col
        class="col header"
        v-for="(col, ind) in colums"
        :key="ind"
        :span="col.width ? col.width : computedSpan"
        >{{ col.title }}</van-col
      >
    </van-row>
    <!-- <div class="van-list-content"> -->
    <van-list
      class="van-list-content"
      v-model="listTable.loading"
      :finished="listTable.finished"
      :immediate-check="immediateCheck"
      :offset="10"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-row v-for="(item, ind) in data" :key="ind">
        <van-col
          class="col"
          v-for="(col, ind) in colums"
          :key="ind"
          :span="col.width ? col.width : computedSpan"
          >{{ item[col.key] }}</van-col
        >
      </van-row>
    </van-list>
    <!-- </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, Model } from "vue-property-decorator";

@Component({})
export default class ListTable extends Vue {
  @Prop({
    default: () => {
      return {};
    }
  })
  listTable!: Object;

  @Prop({
    default: () => {
      return {};
    }
  })
  colums!: Object[];
  @Prop({
    default: () => {
      return {};
    }
  })
  data!: Object[];
  @Prop({
    default: () => {
      return false;
    }
  })
  immediateCheck!: Boolean;
  get computedSpan() {
    let len = this.colums.filter((item: any) => !item.width).length;
    let totalSpan: any = this.colums.reduce(
      (prev: any = {}, next: any = {}) => {
        return (prev.width ? prev.width : prev) + (next.width ? next.width : 0);
      }
    );
    return (24 - (totalSpan ? totalSpan : 0)) / len;
  }
  @Emit("onLoad")
  emitOnLoad() {}
  onLoad() {
    this.emitOnLoad();
  }
}
</script>

<style lang="less" scoped>
.list-table {
  display: flex;
  flex-direction: column;
  .van-list-content {
    flex-grow: 1;
    overflow: auto;
  }
  .header {
    background-color: #fafafa;
    color: #b2b2b2;
  }
  .col {
    padding: 10px;
    text-align: center;
  }
}
</style>
